{% extends 'base/front_base.html' %}

{% block title %}
确认订单
{% endblock %}

{% block head %}
    <link rel="stylesheet" href="{% static 'css/common/header.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/common/footer.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/common/body.min.css' %}">
    <style>
        .table{
            width: 100%;
            border-top: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
            background: #eaeaea;
            text-align: center;
        }
        .table{
            border-spacing: 20px;
        }
        .table img{
            width: 120px;
            height: 68px;
            float: left;
        }
        .table .title{
            margin-left: 10px;
        }
        .pay-way label{
            float: right;
        }
        .pay-way span{
            border: 1px solid #ccc;
            position: relative;
            top: 20px;
        }
        .pay-way .zfb-btn{
            display: inline-block;
            width: 139px;
            height: 48px;
            cursor: pointer;
            background: url("http://study.163.com/res/images/pay/payList.png");
            background-position: -140px 0;
            background-size: 300% 200%;
            margin-right:20px;
        }
        .pay-way .wx-btn{
            display: inline-block;
            width: 139px;
            height: 48px;
            position: relative;
            cursor: pointer;
        }
        .pay-way .wx-btn img{
            top: 12px;
            left: 16px;
            position: absolute;
        }
        .submit-group{
            overflow: hidden;
            padding: 60px 0;
        }
        .submit-btn{
            display: block;
            text-align: center;
            width: 136px;
            height:49px;
            line-height: 49px;
            background: url("http://s.stu.126.net/res/images/pay/payBtns.png?c9b6b849b38cca45b160a96802575ac8") no-repeat 4449px 4449px;
            background-position: 0 -302px;
            border: none;
            cursor: pointer;
            color: #fff;
            font-size: 16px;
            float: right;
        }
        .submit-btn:hover{
            background-position: -139px -302px;
        }
    </style>
    <script>
        $(function () {
            var submitBtn = $("#submit-btn");
            submitBtn.click(function (event) {
                event.preventDefault();
                var goodsname = $("input[name='goodsname']").val();
                var istype = $("input[name='istype']:checked").val();
                var notify_url = $("input[name='notify_url']").val();
                var orderid = $("input[name='orderid']").val();
                var price = $("input[name='price']").val();
                var return_url = $("input[name='return_url']").val();
                xfzajax.post({
                    'url': '/course/course_order_key/',
                    'data': {
                        'goodsname': goodsname,
                        'istype': istype,
                        'notify_url': notify_url,
                        'orderid': orderid,
                        'price': price,
                        'return_url': return_url
                    },
                    'success': function (result) {
                        if(result['code'] === 200){
                            var key = result['data']['key'];
                            var keyInput = $("input[name='key']");
                            keyInput.val(key);
                            $("#pay-form").submit();
                        }
                    }
                });
            });
        });
    </script>
{% endblock %}

{% block main %}
    <div class="main">
        <div class="wrapper">
            <table class="table">
            <thead>
                <tr>
                    <th align="left">商品名称</th>
                    <th>单价(元)</th>
                    <th>小计（元）</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td align="left">
                        <a href="#">
                            <img class="thumbnail" src="{{ goods.thumbnail }}" alt="">
                            <span class="title">{{ goods.title }}</span>
                        </a>
                    </td>
                    <td>{{ goods.price }}</td>
                    <td>{{ goods.price }}</td>
                </tr>
            </tbody>
        </table>
            <form action="https://pay.bearsoftware.net.cn/" method="post" id="pay-form">
                <input type="hidden" name="uid" value="59bb8c18828affbf5bd100d0">
                <input type="hidden" name="price" value="{{ goods.price }}">
                <input type="hidden" name="notify_url" value="{{ notify_url }}">
                <input type="hidden" name="return_url" value="{{ return_url }}">
                <input type="hidden" name="orderid" value="{{ order.pk }}">
                <input type="hidden" name="orderuid" value="{{ request.user.pk }}">
                <input type="hidden" name="goodsname" value="{{ goods.title }}">
                <input type="hidden" name="key" value="">
            <div class="pay-way">
                <label for="istype-wx">
                    <input id="istype-wx" type="radio" name="istype" value="2">
                    <span class="wx-btn">
                        <img src="http://nos.netease.com/test-edu-image/1BD9F69D6760CE1508D2269864AA54F8.png" alt="">
                    </span>
                </label>
                <label for="istype-zfb">
                    <input id="istype-zfb" type="radio" name="istype" value="1" checked>
                    <span class="zfb-btn"></span>
                </label>
                <div style="clear: both;"></div>
            </div>
            <div class="submit-group">
                <input type="submit" value="去支付" id="submit-btn" class="submit-btn">
            </div>
        </form>
        </div>
    </div>
{% endblock %}